<!DOCTYPE html>
<html>
<head>
    <title>MP4 video file</title>
    <script type="text/javascript" src="../../bin-debug/jwplayer.js"></script>
    <link type="text/css" rel="stylesheet" href="styles/tests.css"  media="all" />
    <meta name="viewport" content="width=device-width, user-scalable=no">

    <style>
        body {
            padding: 0 5px;
            margin: 0;
        }
    </style>

    <script type="text/javascript">
        /* SKINS -
            seven,
            six,
            five,
            beelden,
            bekle,
            glow,
            roundster,
            stormtrooper,
            vapor
        */

        config = {
            width: "100%",
            height: 260,
            skin : 'seven',
            playlist: [
                {
                    image:'http://content.bitsontherun.com/thumbs/3XnJSIm4-480.jpg',
                    sources: [
                        {
                            file: 'http://content.bitsontherun.com/videos/3XnJSIm4-injeKYZS.mp4',
                            height: 180,
                            width: 320
                        }, {
                            file: 'http://content.bitsontherun.com/videos/3XnJSIm4-kNspJqnJ.mp4',
                            height: 360,
                            width: 640
                        }, {
                            file: 'http://content.bitsontherun.com/videos/3XnJSIm4-DZ7jSYgM.mp4',
                            height: 720,
                            width: 1280
                        }, {
                            file: 'http://content.bitsontherun.com/videos/3XnJSIm4-el5vTWpr.mp4',
                            height: 1080,
                            width: 1920
                        }, {
                            file: 'http://content.bitsontherun.com/videos/bkaovAYt-E6Fbcq5r.webm',
                            height: 180,
                            width: 320
                        }, {
                            file: 'http://content.bitsontherun.com/videos/bkaovAYt-27m5HpIu.webm',
                            height: 270,
                            width: 480
                        }, {
                            file: 'http://content.bitsontherun.com/videos/3XnJSIm4-HRoRMLSY.webm',
                            height: 405,
                            width: 720
                        }, {
                            file: 'http://content.bitsontherun.com/videos/3XnJSIm4-MoSrD9rm.webm',
                            height: 720,
                            width: 1280
                        }
                    ],
                    tracks: [
                        { file: 'assets/thumbs.vtt', kind: 'thumbnails' },
                        {file: '//playertest.longtailvideo.com/chapters/sintel-chapters.vtt', kind: 'chapters'},
                        {file: '//playertest.longtailvideo.com/captions/sintel-ch.srt', label: 'Chinese'},
                        {file: '//playertest.longtailvideo.com/captions/sintel-fa.srt', label: 'Farsi'},
                        {file: '//playertest.longtailvideo.com/captions/sintel-gr.srt', label: 'Greek'},
                        {file: '//playertest.longtailvideo.com/captions/sintel-jp.srt', label: 'Japanese'},
                        {file: '//playertest.longtailvideo.com/captions/sintel-ko.srt', label: 'Korean'},
                        {file: '//playertest.longtailvideo.com/captions/sintel-pl.srt', label: 'Polish'},
                        {file: '//playertest.longtailvideo.com/captions/sintel-ru.srt', label: 'Russian'},
                        {file: '//playertest.longtailvideo.com/captions/sintel-sp.srt', label: 'Spanish'},
                        {file: '//playertest.longtailvideo.com/captions/sintel-tr.srt', label: 'Turkish'}
                    ],
                    description : 'Scales!',
                    title: 'Sintel is such a good movie, sometimes I wonder why it wasnt a feature film'
                },
                {
                    sources: [
                        {file: '//content.bitsontherun.com/videos/bkaovAYt-52qL9xLP.mp4'},
                        {file: '//content.bitsontherun.com/videos/bkaovAYt-27m5HpIu.webm'}
                    ],
                    title: 'Big Buck Bunny'
                }
            ]
        };
    </script>
</head>
<body>

<h1>Setup Examples</h1>

<h2>Standard Player</h2>
<div id="video-container">before set up</div>
<script type="text/javascript">
(function(jwplayer) {
    var jwp = jwplayer('video-container').setup(config);

    jwp.addButton('css-skins/icons/both.png', 'TEST', function() {console.log('first');}, 'first');
})(window.jwplayer);
</script>

<h2>Small Audio Player</h2>
<div id="audio-small">before set up</div>
<script type="text/javascript">
    (function(jwplayer) {
        jwplayer("audio-small").setup({
            file: 'http://content.bitsontherun.com/videos/3XnJSIm4-I3ZmuSFT.m4a',
            image: 'http://content.bitsontherun.com/thumbs/3XnJSIm4-480.jpg',
            height: "45",
            width: "300"
        });
    })(window.jwplayer);
</script>

<h2>Large Audio Player</h2>
<div id="audio-large">before set up</div>
<script type="text/javascript">
    (function(jwplayer) {
        jwplayer("audio-large").setup({
            file: 'http://content.bitsontherun.com/videos/3XnJSIm4-I3ZmuSFT.m4a',
            image: 'http://content.bitsontherun.com/thumbs/3XnJSIm4-480.jpg',
            height: "65",
            width: "100%"
        });
    })(window.jwplayer);
</script>

<h2>Poster Audio Player</h2>
<div id="audio-poster">before set up</div>
<script type="text/javascript">
    (function(jwplayer) {
        jwplayer("audio-poster").setup({
            file: 'http://content.bitsontherun.com/videos/3XnJSIm4-I3ZmuSFT.m4a',
            image: 'http://content.bitsontherun.com/thumbs/3XnJSIm4-480.jpg',
            width: "384",
            height: "216"
        });
    })(window.jwplayer);
</script>
</body>
</html>
